<template>
<div class="page-main">
  <div class="header">
    <span class="title-text">招聘进度一览图</span>
    <ul class="header-nav" v-if="checkNav&&checkNav.length>0">
      <li class="nav-li" :class="navIndex===0?'nav-li-act':''" @click="setCheckNav(0,checkNav[0])">
        <span>全部</span>
      </li>
      <li class="nav-li" :class="navIndex===1?'nav-li-act':''" @click="setCheckNav(1,checkNav[1])">
        <span>{{ checkNav[1].value }}</span>
        <ul class="extend-view">
          <li class="extend-item" :class="checkNav[1].value===item.value?'extend-item-act':''" v-for="item in checkNav[0].children" :key="item.id" @click.stop="setCheckNav(1,item)">{{ item.value }}</li>
        </ul>
      </li>
      <li class="nav-li" :class="navIndex===2?'nav-li-act':''" @click="setCheckNav(2,checkNav[2])" v-if="checkNav[1].children&&checkNav[1].children.length>0">
        <span>{{ checkNav[2].value }}</span>
        <ul class="extend-view">
          <li class="extend-item" :class="checkNav[2].value===item.value?'extend-item-act':''" v-for="item in checkNav[1].children" :key="item.id" @click.stop="setCheckNav(2,item)">{{ item.value }}</li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="date-view">
    <img src="@/assets/images/dataCentre/recruitmentProgress/date.png" alt="" class="date-img">
    <span class="date-val">{{ currentDate.timeLabel }}</span>
    <a-select class="date-com" style="width: 200px" :filter-option="filterOption" v-model:value="keyWords" placeholder="请选择年份">
      <a-select-option :value="item.value" v-for="item in yearOption" :key="item.timeLabel" :code="item">{{ item.timeLabel }}</a-select-option>
    </a-select>
  </div>
  <MapBody :navInfo="navInfo" :selectedCity="selectedCity" @selectRegion="selectRegion"/>
  <DemandData :navInfo="navInfo" :selectedCity="selectedCity"/>
  <ChartBody :navInfo="navInfo" :selectedCity="selectedCity"/>
</div>
</template>

<script lang="ts" setup>
import {onMounted, ref ,computed} from "vue"
import { selectCommonConfigFoChildren } from '@/api/data-center/recruitment-progress.ts'
import ChartBody from './components/ChartBody.vue'
import MapBody from './components/MapBody.vue'
import DemandData from './components/DemandData.vue'
import {message} from "ant-design-vue";
import { yearList } from '@/api/applay/HRData/index'


// 头部导航选中的层级
const navIndex = ref<number>(0);

// 导航结构数据
const navData = ref<any>(null);

// 选中的导航数据(下标0为全部数据、下标1为国家数据、下标2为省数据)
const checkNav = ref<any>([]);

// 地图中选中的市的数据
const selectedCity = ref<any>({});

// 日期组件绑定值
const dateValue = ref<any>("");

// 传递给组件的导航数据
const navInfo = computed(()=>{
  return{
    navIndex:navIndex.value,
    checkNav:checkNav.value,
    dateValue:dateValue.value
  }
});

onMounted(()=>{
  getNavData()
})

// 日期选择器选项列表
const yearOption = ref([])
// 日期选择器选择的值
const currentDate = ref({})
// 日期选择器输入框绑定值
const keyWords = ref(undefined)

/**
 * 获取日期选择列表
 */
const getYearList = async () => {
  const data = await yearList()
  if(data){
    yearOption.value = data.timeRangeList
    currentDate.value = data.currentYear
    keyWords.value = data.currentYear.timeLabel
    dateValue.value = {
      year: data.currentYear.timeLabel,
      beginTime: data.currentYear.startTime,
      endTime: data.currentYear.endTime
    }
  } else{
    message.error(data.msg)
  }
}
getYearList()

/**
 * 地图选中地区事件
 */
const selectRegion = (data) => {
  selectedCity.value = data
}

/**
 * 设置选中的导航信息
 * @param index 导航层级
 * @param data 导航数据
 */
const setCheckNav = (index,data) => {
  checkNav.value[index] = data
  navIndex.value = index
  selectedCity.value = {}
}

/**
 * 获取导航数据
 */
const getNavData = async ()=>{
  const res = await selectCommonConfigFoChildren({type:2})
  navData.value = res
  checkNav.value[0] = res[0]
  checkNav.value[1] = res[0].children[0]
  checkNav.value[2] = res[0].children[0].children[0]
  navIndex.value = 2
}
</script>

<style lang="less" scoped>
.date-view{
  position: absolute;
  top: 29px;
  right: 645px;
  z-index: 2;
  .date-val{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 40px;
    font-size: 16px;
    color: #56658C;
  }
  .date-img{
    width: 94px;
    height: 36px;
  }
  .date-com{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
.header{
  width: 100%;
  height: 65px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url("@/assets/images/dataCentre/recruitmentProgress/headerbg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  .header-nav{
    display: flex;
    align-items: center;
    margin-left: 156px;
    align-self: flex-end;
    .nav-li{
      width: 165px;
      height: 38px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url("@/assets/images/dataCentre/recruitmentProgress/navbg.png");
      background-size: auto 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      color: #56658C;
      font-size: 16px;
      &:hover{
        .extend-view{
          display: block;
        }
      }
      .extend-view{
        display: none;
        position: absolute;
        top: 38px;
        left: 0;
        width: 119px;
        background: linear-gradient( 324deg, rgba(52,111,237,0.6) 0%, #EAEEFE 100%);
        border-radius: 2px;
        .extend-item-act{
          color: #FFFFFF !important;
        }
        .extend-item{
          padding: 6px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #56658C;
          &:hover{
            color: #FFFFFF;
          }
        }
      }
    }
    .nav-li-act{
      background-image: url("@/assets/images/dataCentre/recruitmentProgress/navbgact.png");
      color: #FFFFFF;
    }
  }
  .title-text{
    font-size: 32px;
    color: #1C7EFC;
    font-weight: 600;
    margin-left: 29px;
    letter-spacing: 10px;
  }
}
.page-main{
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/dataCentre/recruitmentProgress/bgimg.png");
  background-size: 1872px 1080px;
  background-repeat: no-repeat;
  overflow: hidden;
}
</style>
